<script setup>
import { ref } from 'vue';
import {ElForm, ElInput, ElFormItem, ElButton, ElCol, ElRow, ElCard, ElMessage} from 'element-plus';
import {Post} from "@/axios/api.js";
import {  getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
// 定义表单数据模型
const form = ref({
  dx: 12156780,
  dy: -74680.5,
  scale: 1.036112644,
  angle: 0.11,
});
// 定义具体的参数名称数组

// 定义表单引用
const formRef = ref(null);

// 映射数组，将索引转换为属性名
const parameterMap = [
  { label: 'X平移(m)', prop: 'dx' },
  { label: 'Y平移(m)', prop: 'dy' },
  { label: '缩放系数', prop: 'scale' },
  { label: '旋转角度', prop: 'angle' },
];



// // 声明组件可能发出的事件
// const emit = defineEmits(['confirm']);
// 确认按钮点击事件处理
const onConfirm = async () => {
  Post('/River/coordinateTransformation',form.value).then((response) => {
    const { code, msg } = response.data;
    if (code === 200) {
      ElMessage.success("坐标参数提交成功!");
    } else {
      ElMessage.error('发生了错误');
    }
  });
};
const onClose=()=>{
  showCardContainer.value = false;
};
const showCardContainer = ref(true); // Default to visible (true)
</script>

<template>


  <div class="card-container"
       v-if="showCardContainer"
  >
    <el-card shadow="never">



      <div slot="header" class="header-title">
        <h3 style="text-align: center;">平面坐标转换四参数输入</h3>
      </div>

      <el-form ref="formRef" :model="form" label-width="180">
        <!-- 七个参数输入框 -->
        <el-row :gutter="20">
          <el-col :span="24"
                  v-for="(param) in parameterMap"
          >
            <el-form-item :label="param.label"
            >
              <el-input
                  v-model="form[param.prop]"
                  :placeholder="'请输入参数'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <!-- 确认按钮 -->
        <el-row>
          <el-col :span="24" class="button-row">
            <el-button type="primary" @click="onConfirm" style="width: 30%;">确认</el-button>
            <el-button type="primary" @click="onClose" style="width: 30%;">关闭</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>



.card-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.el-card {
  background-image: linear-gradient(135deg, #ffffff 0%, #f1f5fc 100%);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-title h3 {
  color: #1d1c1c;
  font-size: 24px;
  margin: 0;
  padding: 20px 0;
  text-align: center;
}

.el-form-item__label {
  color: #adc6eb;
  font-size: 14px;
}

.el-input__inner {
  border-color: #8fc0fc;
  height: 44px;
  border-radius: 6px;
  font-size: 14px;
  padding: 0 15px;
}

.el-button--primary {
  background-image: linear-gradient(45deg, #abc2df 0%, #93a9ce 100%);
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 6px;
  height: 48px;
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  background-position: right bottom;
}

.button-row {
  text-align: center;
  margin-top: 30px;
}
</style>